<template>
  <div class="demo">
        <h2>姓名：{{name}}</h2> 
        <h2>性别：{{sex}}</h2>
        <h2>年龄：{{age}}</h2>
        <h2>数字: {{number}}</h2>
        <button @click="sendStudentName">点击传送学生姓名</button>
        <button @click="unbind">解绑!(全部)</button>
        <button @click="add">点我+1</button>
        <button @click="destory">销毁子组件</button>


  </div>
</template>

<script>

  export default {
    name:'MyStudent',
    data(){
      return{
        name:'周杰',
        sex:'男',
        age:'22',
        number:0
      }
    },
    // (1) 别忘了钩子函数它直接是vm配置对象的属性，而不是写在methods里面
      mounted() {
      console.log(this.x)
     },
      methods: {
          sendStudentName(){
             this.$emit('atguigu',this.name,888,999,2322)
             this.$emit('demo')
          },
          unbind(){
            // (2) 解绑还需系铃人好吧,在哪个组件上的定义,就在那个组件上解绑,但是一次只能解绑一次
            //  this.$off('atguigu') // 单个
            this.$off(['atguigu','demo'])//多个
            // this.$off() 和上一个意思一样,全部取消绑定
          },
          add(){
            this.number++;
            console.log('add被调用了');
          },
          destory(){
            // (3) 销毁后所有方法还有自定义事件全没了
            this.$destroy()
          }
      },
  }
</script>

<style scoped>
  .demo{
     background-color: blanchedalmond;
     padding: 5px;
  }
</style>